
<template>
  <div class="home-wrap">
    <!-- 轮播图 -->
    <section class="home-banner">
      <swiper
        class="swiper-banner"
        :list="bannerList"
        :show-dots="false"
        :auto="true"
        :loop="true"
        :duration="600"
        :interval="3000"
        :show-desc-mask="false"
        v-model="swiperValue"
        height="200px">
       </swiper>
      <ul class="banner-indicators-box">
        <li v-for="(banner, index) in bannerList" :key="index" class="banner-indicator" :class="{active: index == swiperValue}"></li>
      </ul>
    </section>

    <!-- 搜索框 -->
    <div class="home-search">
      <input type="text" placeholder="请输入小区、商圈" v-model="keyword" @click="$router.push('/search')"/>
    </div>
    <!-- 搜索按钮 -->
<!--     <div class="home-search-btn" @click="$router.push('/search')">
      <i class="icon icon-search"></i>
    </div> -->
    <!-- 头条 -->
    <div class="home-news">
      <!-- <div class="toutiao"></div> -->
      <div class="news">
        <group>
          <cell>
            <marquee class="marquee-wrap" direction="down" :duration="700" :interval="2500">
              <marquee-item class="marquee-box" v-for="(news, index) in newsList" :key="index" @click.native="skip(news.url)">
                <div class="news-type">政策头条</div>
                <p>{{news.title}}</p>
              </marquee-item>
            </marquee>
          </cell>
        </group>
      </div>
      <div class="right-arrow"></div>
    </div>

    <!-- 服务项目 -->
    <section class="home-services">
      <div class="hd">
        <ul>
          <li @click="$router.push('/homeRenting')">
            <img src="../../images/home/iwant-house.png" alt="" />
            <p>我要租房</p>

          </li>
          <li @click="$router.push('/homeSales')">
            <img src="../../images/home/iwant-rent.png" alt="" />
            <p>我要放盘</p>

          </li>
          <li  @click="$router.push('/map')">
            <img src="../../images/home/map-search-house.png" alt="" />
            <p>地图找房</p>

          </li>
          <li @click.stop="$router.push('/newsPolitics')">
            <img src="../../images/home/gongzuzx.png" alt="" />
            <p>政策资讯</p>

          </li>
        </ul>
      </div>
     <!--  <div class="bd">
        <ul>
          <li>
            <img src="../../images/home/zulinbeian.png" alt="" />
            <p>租赁备案</p>

          </li>
          <li>
            <img src="../../images/home/ruhujifen.png" alt="" />
            <p>入户积分</p>

          </li>
          <li>
            <img src="../../images/home/gongjijin.png" alt="" />
            <p>公积金</p>

          </li>
          <li>
            <img src="../../images/home/ruxuejifen.png" alt="" />
            <p>入学积分</p>

          </li>
        </ul>
      </div> -->
    </section>


    <!-- 推荐房源 -->
    <section class="recommend-house">
       <a href="/rentList" class="row-header">
        <span class="col-title">推荐房源</span>
        <span class="col-more">更多></span>
      </a>
      <swiper-list :swiperListData="swiperListData">
        <template slot-scope="props">
          <div class="slide-img" :style="{backgroundImage: `url(${props.swiperItem.coverImg})`}"></div>
          <div class="desc one-line">{{props.swiperItem.address}}.{{props.swiperItem.highlights}}</div>
          <div class="price">￥{{props.swiperItem.rentalPrice}}/月</div>
        </template>
      </swiper-list>
    </section>

    <!-- 热门房源 -->
    <section class="hot-house">
      <a href="/brandApartment" class="row-header">
        <span class="col-title">热门房源</span>
        <!-- <span class="col-more">更多></span> -->
      </a>
      <home-list v-for="(item, index) in resource" :key="index" :houseInfo="item"></home-list>
    </section>
  </div>
</template>

<script>
import { Swiper, Marquee, MarqueeItem, Divider, Cell } from 'vux'
import HomeList from './child/HomeList'
import swiperList from './child/swiperList'

export default {
  name: 'Home',
  components: {
    Swiper,
    Marquee,
    MarqueeItem,
    Divider,
    HomeList,
    swiperList,
    Cell
  },
  data () {
    return {
      swiperValue: 0,
      activeIndex: 0,
      housePersons: [], // 个人房源
      publicHouses: [], // 公租房
      resource: [], // 机构房源
      bannerList: [ // 轮播图数据
        {
          url: 'javascript:',
          img: require('@/images/home/banner01.png')
        },
        {
          url: '/myCredit',
          img: require('@/images/home/banner02.png')
        },
        {
          url: 'javascript:',
          img: require('@/images/home/banner03.png')
        }
      ],
      newsList: [
        {
          title: '广州市第三家国有住房租赁企业揭牌成立',
          url: 'http://www.gz.gov.cn/gzccjg/gzdt/201712/a5cbfb4a588f4c8eb893a2704331c402.shtml'
        },
        {
          title: '广东工行提供 200亿元支持 广州城投项目',
          url: 'http://news.163.com/17/1211/06/D5BT8GP500018AOP.html'
        },
        {
          title: '工商银行5000亿元住房租赁市场建设资金落地',
          url: 'http://news.163.com/17/1121/01/D3NT9CN400014AEE.html'
        },
        {
          title: '央媒解读广州“租购同权”新政：房屋租赁时代或到来',
          url: 'http://news.163.com/17/0719/10/CPN05G84000187VE.html'
        },
        {
          title: '三部委再提住房租赁 宅基地改革不以买卖为出发点',
          url: 'http://www.funxun.com/news/34/20171123100207.html'
        },
        {
          title: '穗首批国有租赁住房企业揭牌 未来将获万亿元支持',
          url: 'http://news.southcn.com/gd/content/2017-11/17/content_178911510.htm'
        },
        {
          title: '房子如何保障住、防止炒',
          url: 'http://society.people.com.cn/n1/2017/1107/c1008-29630434.html'
        }
      ], // 政策质询数据
      keyword: '',
      swiperListData: []
    }
  },
  methods: {
    skip (url) {
      window.location.href = url
    },
    search () {
      if (this.keyword !== '') {
        this.$router.push({path: '/rentList', query: {communityName: this.keyword}})
      } else {
        this.$vux.toast.text('关键词不能为空')
      }
    }
  },
  created () {
    // 个人房源
    // this.$axiosPosting(this.$api.getHousePersonsListWithCondition, {page: 1, pageSize: 5}).then(res => {
    //   if (res.code === '0000') {
    //     this.housePersons = res.data
    //   }
    // })
    // // 公租房
    // this.$axiosPosting(this.$api.getHousePublicNewInfos).then(res => {
    //   if (res.code === '0000') {
    //     this.publicHouses = res.data.housePublicList
    //   }
    // })
    if (this.$store.state.home.resource.length > 0) {
      this.resource = this.$store.state.home.resource
      this.$nextTick(() => {
        document.body.scrollTop = 1
        document.body.scrollTop = this.$store.state.home.scrollTop
      })
    } else {
      // 热门房源
      this.$axiosPosting(this.$api.hotHouseList, {pageSize: 20}).then(res => {
        if (res.code === '0000') {
          this.resource = res.data.data || []
          this.$nextTick(() => {
            document.body.scrollTop = 1
            document.body.scrollTop = this.$store.state.home.scrollTop
          })
        }
      })
    }
    // if (this.$store.state.home.swiperListData.length > 0) {
    //   this.swiperListData = this.$store.state.home.swiperListData
    // } else {
    // 推荐房源
    this.$axiosPosting(this.$api.getHousePersonsListWithCondition, {pages: 1, pageNumber: 20}).then(res => {
      if (res.code === '0000') {
        this.swiperListData = res.data.houseList
      }
    })
    // }
    // if (this.$store.state.home.newsList.length > 0) {
    //   this.newsList = this.$store.state.home.newsList
    //   this.$nextTick(() => {
    //     document.body.scrollTop = 1
    //     document.body.scrollTop = this.$store.state.home.scrollTop
    //   })
    // } else {
    //   // 资讯
    //   this.$axiosGeting(this.$api.consult).then(res => {
    //     this.newsList = [...res.datas]
    //     this.$nextTick(() => {
    //       document.body.scrollTop = 1
    //       document.body.scrollTop = this.$store.state.home.scrollTop
    //     })
    //   })
    // }
  },
  beforeRouteLeave (to, from, next) {
    this.$store.commit('home/setHomeData', {
      resource: this.resource,
      // newsList: this.newsList,
      scrollTop: document.body.scrollTop
    })
    next()
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/base.less";
  @import "../../styles/baseVar.less";
  ul, li{
    list-style: none;
  }
  .pad-side-15{
    padding: 0 0.75rem;
  }
  .pad-top-19{
    padding-top: 0.95rem;
    box-sizing: border-box;
  }

  .home-wrap{
    /*height: 100%;*/
    overflow-y: scroll;
    box-sizing: border-box;
    background: #fff;
    .home-banner{
      position: relative;
      width: 100%;
      background: #fff;
      .banner-indicators-box{
        position: absolute;
        bottom: 1.0rem;
        width: 100%;
        display: flex;
        justify-content: center;
        .banner-indicator{
          width: 0.2rem;
          height: 0.2rem;
          background: rgba(0, 0, 0, .3);
          border-radius: 50%;
          &+.banner-indicator{
            margin-left: 0.25rem;
          }
          &.active{
            width: 0.4rem;
            height: 0.2rem;
            background-color: rgb(255,158,0);
            border-radius: 0.2rem;
          }
        }
      }
    }
    .home-search{
      height: 1.7rem;
      padding: 0 0.75rem;
      width: 17.25rem;
      position: absolute;
      top: 0.5rem;
      left: 0;
      input::placeholder{color:#fff;}
      input{
        width: 100%;
        height: 1.7rem;
        color: #fff;
        line-height: 1.7rem;
        font-size: 0.75rem;
        background: url('../../images/home/search-icon.png') 0.5rem center no-repeat;
        background-size: 0.75rem 0.75rem;
        background-color: rgba(255, 255, 255, 0.5);
        text-indent: 1.5rem;
        border-radius: 0.2rem;
      }
    }
    .home-search-btn{
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      overflow: hidden;
      .icon-search{
        display: inline-block;
        width: 100%;
        height: 100%;
        background: url('../../images/home/home_search.png') center no-repeat;
        background-size: 100%;
      }
    }
    .home-news{
      position: relative;
      height: 60px;
      overflow: hidden;
      // .toutiao{
      //   position: absolute;
      //   width: 1.9rem;
      //   height: 1.15rem;
      //   background: url('../../images/home/toutiao.png') no-repeat;
      //   background-size: 100%;
      //   left: 0.75rem;
      //   top: 50%;
      //   margin-top: -0.55rem;
      //   z-index: 2;
      // }
      &::after{
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #eee;
        color: #eee;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
      .news{
        // width: 17.5rem;
        height: 60px;
        .marquee-box{
          display: flex;
          align-items: center;
          padding-left: 1rem;
          height: 60px;
          .news-type{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            padding-right: 4px;
            padding-left: 2px;
            margin-right: .5rem;
            text-align: center;
            line-height: 1.2;
            color: #fff;
            font-size: 10px;
            background: url('../../images/home/home_toutiao.png') no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
          }
          p{
            flex: 1;
            padding-right: 2.8rem;
            font-size: @font-size-13;
            color: #333;
            text-align: left;
            line-height: 1.2;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            box-sizing: border-box;
          }
        }
      }

      .right-arrow{
        position: absolute;
        width: 0.4rem;
        height: 0.65rem;
        right: 0.75rem;
        top: 0;
        bottom: 0;
        margin: auto;
        background: url('../../images/home/right-arrow.png') no-repeat;
        background-size: 100% 100%;
      }

    }
    .home-services{
      padding-top: 1.0rem;
      .hd{margin-bottom: 1.0rem;}
      ul{display: flex;}
      ul>li{
        flex: 1;
        font-size: 0.7rem;
        color: rgba(51,51,51,0.8);
        text-align: center;
        img{
          width: 2.5rem;
          height: 2.5rem;
          margin-bottom: 0.6rem;

        }
      }
      .bd>ul>li>img{width: 1.15rem;height: 1.15rem;}

    }
    .row-header {
      padding-left: 0.75rem;
      display: block;
      color: black;
      position: relative;
      border-top: 1px solid #f4f4f4;
      padding-top: 1.0rem;
      padding-bottom: 1.0rem;
      margin-top: 0.95rem;
    }
    .col-title {
      font-size: 0.9rem;
    }
    .col-more {
      font-size: 0.7rem;
      color: #999;
      position: absolute;
      right: 0.9rem;
      letter-spacing: 1px;
    }
    .recommend-house{
      .slide-img{
        width:10.75rem;
        height: 6.0rem;
        margin-bottom: 0.6rem;
        background: no-repeat center center;
        background-size: cover;
      }
      .desc{
        font-size: 0.7rem;
        color: #666;
        margin-bottom: 0.45rem;

      }
      .price{
        color: rgb(255,78,0);
        font-size: 0.75rem;
      }
      .one-line{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; text-overflow:ellipsis;}
    }
    .hot-house {
      .row-header{padding-bottom: 0;}
    }



  }

</style>

<style lang="less">
//覆盖vux组件原有样式
  .home-wrap .vux-cell-bd{display: none;}
  .home-wrap .weui-cells{margin-top: 0;}
  .home-wrap .weui-cells:before,.weui-cells:after{border: none;}
  .home-wrap .weui-cell__hd{
    margin-top: -2px;
  }
  .home-wrap .vux-slider > .vux-swiper > .vux-swiper-item > a > .vux-img{background-size: 100% 100%;}


</style>
